

<template>
  <div class="user-info">
    <div class="info-title">信息修改</div>
    <div class="info-box">
      <el-card shadow="never" class="mb">
        <div class="box-title">基本信息</div>
        <ul>
          <!-- <li v-if="this.user.roleKey == 'duiwu'">队伍名:<span>{{this.team.name}}</span></li> -->
          <li>姓名:<span>{{this.user.name}}</span></li>
          <li>注册时间:<span>{{this.user.createTime}}</span></li>
          <li>账号类型:<span>{{userRole}}</span></li>
          <li v-if="this.user.roleKey == 'duiwu'">队伍编号:<span>{{this.user.teamId}}</span></li>
        </ul>
      </el-card>
      <el-card shadow="never" class="mb">
        <el-row type="flex" justify="space-between">
        <div class="box-title">信息修改</div>
        </el-row>
        <ul>
          <li>用户名:<span>{{this.user.username}}</span></li>
          <li v-if="this.user.roleKey === 'duiwu'">单位名称:<span>{{this.team.name}}</span><el-button size="mini" type="danger" @click="dialogVisible = true" plain>修改</el-button></li>
          <li v-if="this.user.roleKey === 'duiwu'">所在地区:<span>{{this.team.province}}:{{this.team.city}}</span><el-button size="mini" type="danger" @click="dialogVisible = true" plain>修改</el-button></li>
          <li>登录密码:<span>********</span><el-button size="mini" type="primary" @click="dialog = true" plain>修改</el-button></li>
          <li>绑定手机:<span>{{this.user.username}}</span></li>
        </ul>
      </el-card>
      <el-dialog
      title="提示"
      v-if="this.user.roleKey === 'duiwu'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="30%">
        <el-form :model="form">
          <el-form-item label="新名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="所在省">
            <el-input v-model="form.province"></el-input>
          </el-form-item>
          <el-form-item label="所在市">
            <el-input v-model="form.city"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"  @click="editUser">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
      title="提示"
      :visible.sync="dialog"
      :close-on-click-modal="false"
      width="30%">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="login-container">
          <el-form-item label="密码" prop="password">
            <el-input type="password" show-password v-model="ruleForm.password" placeholder="用户密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="passwordConfirm">
            <el-input type="password" show-password v-model="ruleForm.passwordConfirm" placeholder="用户密码" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialog = false">取 消</el-button>
          <el-button type="primary"  @click="editPwd">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import {update} from '@/api/team'
import {updatePwd} from '@/api/login'
export default {
  data () {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
          callback(new Error('请输入密码'));
      } else {
      if (this.ruleForm.confirmPwd !== '') {
        this.$refs.ruleForm.validateField('passwordConfirm');
      }
      callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible:false,
      dialog:false,
      ruleForm:{
        password:'',
        passwordConfirm:'',
      },
      form:{
        name:'',
        id: '',
        city:'',
        province:''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        passwordConfirm: [
          { required: true, message: '请确认密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' },
          { validator: validatePass2, trigger: 'blur', required: true }
        ]
      }
    }
  },
  computed:{
    ...mapState({
      user:state => state.user.userInfo,
      team:state => state.user.teamInfo
    }),
    userRole() {
      if(this.user.roleKey === 'jiazhang') {
        return '家长'
      } else if (this.user.roleKey === 'caipan') {
        return '裁判'
      } else {
        return '队伍'
      }
    }
  },
  mounted() {
    this.getUserInfo()
    this.getTeamInfo()
  },
  methods:{
    editPwd(){
      let params = {
        username:this.user.username,
        password:this.ruleForm.password
      }
      updatePwd(params).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "密码修改成功",
          });
          this.dialog = false
        } else {
          this.$message({
            type: "error",
            message: "密码修改失败",
          });
          this.dialog = false
        }
      })
    },
    getTeamInfo(){
      this.$store.dispatch('GetTeamInfo').then(res => {
        this.form = res.data
      })
    },
    getUserInfo() {
      this.$store.dispatch('GetInfo').then(res => {
        // this.form = res.data
      })
    },
    editUser() {
      this.form.id = this.team.id
      update(this.form).then(res => {
        if (res.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功",
          });
          this.dialogVisible = false
        } else {
          this.$message({
            type: "error",
            message: "提交失败",
          });
          this.dialogVisible = false
        }
      })
    }
  }
}
</script>
<style scoped>
ul li {
  list-style: none;
  padding: 0;
  margin-bottom: 10px;
  line-height: 28px;
}
ul li span {
  padding-left: 20px;
}
ul li .el-button {
  float: right;
}
.info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}
.box-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 20px;
}
.mb {
  margin-bottom: 20px;
}
</style>